<template>
  <el-card class="box-card" shadow="never">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="填写商品信息"></el-step>
      <el-step title="填写商品促销"></el-step>
      <el-step title="填写商品属性"></el-step>
    </el-steps>
    <One v-if="active == 0" @xiabu="xiabu" v-model="form"></One>
    <Two
      v-else-if="active == 1"
      @xiabu="xiabu"
      @shangbu="shangbu"
      v-model="form"
    ></Two>
    <Tress v-else @shangbu="shangbu" @tianjia="tianjia" v-model="form"></Tress>
  </el-card>
</template>

<script>
import One from "./addtress/one.vue";
import Two from "./addtress/two.vue";
import Tress from "./addtress/tress.vue";

import {
  addProduct,
  getProductById,
  editProductById,
} from "../../../../api/productApi";

const defaultProductObj = {
  productCategoryId: null, // 商品分类ID
  productCategoryName: "", // 商品分类名字
  name: "", // 商品名称
  subTitle: "", // 副标题
  productIntro: "", // 商品介绍
  productSn: "", // 商品货号
  originalPrice: null, // 市场价
  price: null, // 商品售价
  store: null, // 商品库存
  sort: null, // 排序
  giftScore: null, // 赠送积分
  giftGrow: null, // 赠送成长值
  publishStatus: 1, // 是否上架
  newsStatus: 1, // 是否新品
  recommendStatus: 1, // 是否推荐
  serviceIds: "1", // 服务列表
  netContent: "", // 净含量
  storageCondition: "", // 储存条件
  quality: "", // 保质期
  reductionType: 0, // 优惠选项
  reductionPrice: 0, // 促销价格
  reductionStartTime: null, //特惠开始时间
  reductionEndTime: null, //特惠结束时间
  memberPriceList: [
    // 会员体系价格
    {
      memberLevelId: 1,
      memberLevelName: "黄金会员",
      memberPrice: null,
    },
    {
      memberLevelId: 2,
      memberLevelName: "白金会员",
      memberPrice: null,
    },
    {
      memberLevelId: 3,
      memberLevelName: "钻石会员",
      memberPrice: null,
    },
  ],
  productHomeKillList: [
    // 首页秒杀
    { count: 0, discount: 0 },
  ],
  productAttr: {
    productImgArr: [],
  },
  pic: "", // 商品主图片
  albumPics: "", // 商品的图片集
  content: "", // 详情页的内容
  detailHtml: "", // 详情页
};
export default {
  data() {
    return {
      form: Object.assign({}, defaultProductObj),
      active: 0,
    };
  },
  components: {
    One,
    Two,
    Tress,
  },
  created() {
    if (this.$route.query.id !== null && this.$route.query.id !== undefined) {
      // 点击了编辑过来的

      // 获取点击的那个商品的ID
      let id = this.$route.query.id;
      console.log(id);
      // 根据ID获取当前商品的信息  根据商品信息实现数据回显
      getProductById({ id: id }).then((res) => {
        console.log(res);
        console.log(res);
        if (res.status == 1) {
          let tempProductObj = res.data;
          console.log(tempProductObj);
          if (tempProductObj.memberPriceList.length === 0) {
            tempProductObj.memberPriceList = [
              {
                memberLevelId: 1,
                memberLevelName: "黄金会员",
                memberPrice: null,
              },
              {
                memberLevelId: 2,
                memberLevelName: "白金会员",
                memberPrice: null,
              },
              {
                memberLevelId: 3,
                memberLevelName: "钻石会员",
                memberPrice: null,
              },
            ];
          }
          if (tempProductObj.productHomeKillList.length === 0) {
            tempProductObj.productHomeKillList = [{ count: 0, discount: 0 }];
          }

          // 实现数据回显
          this.form = tempProductObj;
          console.log(this.form);
        }
      });
    }
  },
  methods: {
    //下一步
    xiabu() {
      if (this.active < 2) {
        this.active++;
      }
    },
    //上一步
    shangbu() {
      if (this.active > 0) {
        this.active--;
      }
    },
    //添加商品
    tianjia() {
      this.$confirm("是否要创建一个新商品, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (this.$route.query.id !== null && this.$route.query.id !== undefined) {
            editProductById(this.form).then((res) => {
               console.log("res" ,res);
              if (res.status === 1) {
                this.$message({
                  type: "success",
                  message: "编辑商品成功!",
                });
                // 一，重新调接口，获取所有的数据，重新渲染   不行
                // 二，使用BOM中的location
                location.reload(); // 刷新   也会重新调接口
              } else {
                this.$message.error("编辑商品失败");
              }
              this.$router.go(-1);
            });
          } else {
            addProduct(this.form).then((res) => {
              console.log("res" ,res);
              if (res.status === 1) {
                this.$message({
                  type: "success",
                  message: "添加商品成功!",
                });
                // 一，重新调接口，获取所有的数据，重新渲染   不行
                // 二，使用BOM中的location
                location.reload(); // 刷新   也会重新调接口
              } else {
                this.$message.error("添加商品失败");
              }
              this.$router.go(-1);
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped>
.box-card {
  width: 1000px;
  margin: 0 auto;
}
</style>